{% extends "base.html" %}
{# Copyright The IETF Trust 2015-2021, All Rights Reserved #}
{% load origin ietf_filters static tz %}
{% block title %}{{ meeting }} : Proceedings Materials{% endblock %}
{% block content %}
    {% origin %}
    <h1>
        {{ meeting }}
        <br>
        <small class="text-body-secondary">Proceedings Materials</small>
    </h1>
    {% if meeting.proceedings_final %}
        <div class="alert alert-warning my-3">The proceedings have been finalized for this meeting.</div>
    {% endif %}
    <table class="table table-sm table-striped tablesorter my-3">
        <thead>
            <tr>
                <th scope="col" data-sort="type">Type</th>
                <th scope="col" data-sort="title">Title</th>
                <th scope="col" data-sort="document">Document</th>
                <th scope="col" data-sort="updated">Updated</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            {% for mat_type, mat in proceedings_materials %}
                <tr>
                    <td>{{ mat_type }}</td>
                    {% if mat and mat.active %}
                        {% url 'ietf.doc.views_doc.document_main' name=mat.document.name as url %}
                        <td>
                            <a href="{{ mat.document.get_href }}">{{ mat }}</a>
                        </td>
                        <td>
                            <a href="{{ url }}">{{ mat.document }}</a>
                            {% if mat.is_url %}
                                (external URL)
                            {% else %}
                                (uploaded file)
                            {% endif %}
                        </td>
                        <td>
                            {% with timestamp=mat.document.time|utc %}
                                {{ timestamp|date:"Y-m-d" }}
                                <br>
                                <small class="text-body-secondary">{{ timestamp|date:"H:i:s" }}&nbsp;UTC</small>
                            {% endwith %}
                        </td>
                    {% else %}
                        <td colspan="3"></td>
                    {% endif %}
                    {% if user|has_role:"Secretariat" %}
                        <td class="text-end">
                            {% url 'ietf.meeting.views_proceedings.upload_material' num=meeting.number material_type=mat_type.slug as upload_url %}
                            {% url 'ietf.meeting.views_proceedings.edit_material' num=meeting.number material_type=mat_type.slug as edit_url %}
                            {% url 'ietf.meeting.views_proceedings.remove_material' num=meeting.number material_type=mat_type.slug as remove_url %}
                            {% url 'ietf.meeting.views_proceedings.restore_material' num=meeting.number material_type=mat_type.slug as restore_url %}
                            {% if mat is None %}
                                <a class="btn btn-primary btn-sm me-1" href="{{ upload_url }}">Add material</a>
                            {% elif mat.active %}
                                <a class="btn btn-warning btn-sm me-1" href="{{ upload_url }}">Replace material</a>
                                <a class="btn btn-primary btn-sm me-1" href="{{ edit_url }}">Change title</a>
                                <a class="btn btn-danger btn-sm me-1" href="{{ remove_url }}">Remove</a>
                            {% else %}
                                <a class="btn btn-primary btn-sm me-1" href="{{ upload_url }}">Add material</a>
                                <a class="btn btn-warning btn-sm me-1" href="{{ restore_url }}">Restore</a>
                            {% endif %}
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <a class="btn btn-secondary float-end"
       href="{% url 'ietf.meeting.views.materials' num=meeting.number %}">Back</a>
{% endblock %}
{% comment %}{% block js %}
  {% if can_manage_materials %}
    <script src="{% static 'ietf/js/js-cookie.js' %}"></script>
    <script src={% static 'ietf/js/sortable.js' %}></script>

    <script>
      var sortables = [];
      var options = {
        group: 'slides',
        animation: 150,
        onAdd: function (event) {onAdd(event)},
        onRemove: function (event) {onRemove(event)},
        onEnd: function (event) {onEnd(event)}
      };

      function onAdd(event) {
        var old_session = event.from.getAttribute(data-'session');
        var new_session = event.to.getAttribute('data-session');
        $.post(event.to.getAttribute('data-add-to-session'), {
          'order': event.newIndex + 1,
          'name': event.item.getAttribute('name')
        });
        $(event.item).find('td:eq(1)').find('a').each(function () {
          $(this).attr('href', $(this).attr('href').replace(old_session, new_session));
        });
      }

      function onRemove(event) {
        var old_session = event.from.getAttribute('data-session');
        $.post(event.from.getAttribute('data-remove-from-session'), {
          'oldIndex': event.oldIndex + 1,
          'name': event.item.getAttribute('name')
        });
      }

      function onEnd(event) {
        if (event.to == event.from) {
          $.post(event.from.getAttribute('data-reorder-in-session'), {
            'oldIndex': event.oldIndex + 1,
            'newIndex': event.newIndex + 1
          });
        }
      }

      $(document).ready(function () {

        $('.slides tbody').each(function () {
          sortables.push(Sortable.create(this, options));
        });

      });

    </script>

  {% endif %}
{% endblock %}
{% endcomment %}